<template>
  <Drawer
    title="新增标注"
    :has-footer="true"
    size="600px"
    @closed="handleClosed"
    @open="handleOpen"
    @confirm="handleConfirm"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-suffix="："
      label-position="left"
      label-width="90px"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio
            :value="item.id"
            v-for="item in LABEL_TYPES"
            :key="item.id"
            >{{ item.name }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="标注内容" prop="content">
        <el-input
          v-if="form.type === EnumLabelType.Text"
          v-model="form.content"
          type="textarea"
        ></el-input>
        <el-button
          type="success"
          v-if="
            form.type === EnumLabelType.Audio ||
            form.type === EnumLabelType.Video
          "
          @click="handleCheckFile"
        >
          点击上传
        </el-button>
      </el-form-item>
      <el-form-item label="圆角" prop="radius">
        <el-input-number
          v-model="form.radius"
          :min="0"
          controls-position="right"
        >
          <template #suffix>
            <span>PX</span>
          </template>
        </el-input-number>
      </el-form-item>
      <el-form-item label="背景色" prop="backgroundColor">
        <el-color-picker
          v-model="form.backgroundColor"
          @change="handleBackgroundColorChange"
        />
      </el-form-item>
    </el-form>
  </Drawer>
</template>

<script setup lang="ts">
import { useFileDialog } from '@vueuse/core'
import { ElMessage } from 'element-plus'
import { computed, ref } from 'vue'

import Drawer from '@/components/Drawer/index.vue'
import { addLabelPoint } from '@/http/pointLabel'
import { IElForm } from '@/types/element-plus'

import { EnumLabelType, LABEL_TYPES } from '../config/config'

const formRef = ref<IElForm>()

interface IFormData {
  point: {
    x: number
    y: number
    z: number
  }
  name: string
  type: EnumLabelType
  content: string
  file: File | null
  radius: number
  backgroundColor: string
}
const props = defineProps<{
  // editId: string
  point: {
    x: number
    y: number
    z: number
  }
  modelId: string
}>()
interface EmitsType {
  // (e: 'update:editId', value: string): void
  (e: 'update:point', value: { x: number; y: number; z: number }): void
  (
    e: 'success',
    value: {
      id: string
      data: IFormData
    },
  ): void
}
const emit = defineEmits<EmitsType>()

// const editId = computed({
//   get: () => props.editId,
//   set: (value: string) => {
//     emit('update:editId', value)
//   },
// })

const currentPoint = computed({
  get: () => props.point,
  set: (value: { x: number; y: number; z: number }) => {
    emit('update:point', value)
  },
})

const handleBackgroundColorChange = (value: string | null) => {
  if (!value) {
    form.value.backgroundColor = ''
  }
}

const getDefaultFormData = () => {
  return {
    point: { x: 0, y: 0, z: 0 },
    name: '',
    type: EnumLabelType.Text,
    content: '',
    file: null,
    radius: 4,
    backgroundColor: '#3cc2e9',
  }
}
const form = ref<IFormData>(getDefaultFormData())
const rules = ref({
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择类型', trigger: 'change' }],
  radius: [{ required: true, message: '请输入半径', trigger: 'blur' }],
  backgroundColor: [
    { required: true, message: '请选择背景色', trigger: 'change' },
  ],
})

const handleClosed = () => {
  // emit('update:editId', '')
  emit('update:point', { x: 0, y: 0, z: 0 })
  form.value = getDefaultFormData()
}
const handleConfirm = async () => {
  await formRef.value?.validate()
  console.log('保存操作：', form.value)
  const formData = new FormData()
  formData.append('modelId', props.modelId)
  formData.append(
    'dot',
    `${form.value.point.x},${form.value.point.y},${form.value.point.z}`,
  )
  formData.append('displayName', form.value.name)
  formData.append('dotLabelType', `${form.value.type}`)
  formData.append('radius', `${form.value.radius}`)
  formData.append('backgroundColor', form.value.backgroundColor)
  if (form.value.type === EnumLabelType.Text) {
    formData.append('labelText', form.value.content)
  } else if (
    form.value.type === EnumLabelType.Video ||
    form.value.type === EnumLabelType.Audio
  ) {
    if (form.value.file) {
      formData.append('file', form.value.file)
    }
  }
  const res = await addLabelPoint(formData)
  ElMessage.success('添加成功')
  emit('success', {
    id: res.id,
    data: form.value,
  })
}
const handleOpen = () => {
  // if (editId.value) {
  //   form.value.name = '测试'
  //   form.value.type = '1'
  //   form.value.content = '测试'
  //   form.value.radius = 0
  //   form.value.backgroundColor = ''
  // } else {
  form.value.point = currentPoint.value
  // }
}

const accept = ref('audio/*')

const { open, onChange } = useFileDialog()

onChange((files) => {
  if (!files?.length) {
    return
  }
  const file = files[0]
  form.value.file = file
})

const handleCheckFile = () => {
  if (form.value.type === EnumLabelType.Audio) accept.value = 'audio/*'
  if (form.value.type === EnumLabelType.Video) accept.value = 'video/*'
  open({
    accept: accept.value,
  })
}
</script>

<style scoped lang="scss"></style>
